@use '@/styles/variables.scss' as *;
// 首页整体业务样式，可单独抽离出来放到指定的vue文件同级
.main-app{
  .main-app-ctn{
    // 左侧报表数据
    .ctn-left{
      flex: 1;
      height: 100%;
      background: url('@/assets/icons/ctn-left-bg.png') center/100% 100% no-repeat;
      .left-echarts-box{
        padding: 14px 12px 21px 16px;
        .table-item{
          height: 380px;
          .filter{
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .marks{
              display: inline-flex;
              align-items: center;
              font-size: 18px;
              img{
                width: 16px;
                height: 16px;
                margin-right: 10px;
              }
              span{
                margin-right: 20px;
              }
            }
            .filter-right{
              height: 100%;
              display: flex;
              .select{
                margin-right: 10px;
                width: 164px;
              }
              .data-pic{
                width: 164px;
                height: 100%;
              }
            }
          }
          .boxs{
            height: calc(100% - 41px);
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .base-box{
              width: 164px;
              height: 168px;
              font-size: 14px;
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              @extend %ctn;
              img{
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 10;
              }
              .base-title{
                font-size: 18px;
                line-height: 60px;
                @extend %title;
                margin-bottom: 48px;
                z-index: 100;
                i{
                  font-style: initial;
                  color: rgba(241, 173, 49, 1);
                  font-size: 24px;
                  font-family: SourceHanSansCN-Bold;
                }
              }
              span{
                z-index: 100;
              }
            }
          }
        }
        .bottom-echarts{
          height: calc(100% - 380px);
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 5px 4px 0;
          overflow: auto;

          .e-item{
            width: calc((100% - 13px)/2);
            height: 225px;
            background: url("@/assets/icons/e-item-bg.png") center/100% 100% no-repeat;
            padding: 16px 10px 0;
            margin-bottom: 13px;

            .e-item-title{
              height: 29px;
              padding-left: 33px;
              line-height: 15px;
              background: url("@/assets/icons/e-item-title-bg.png") center/100% 100%;
              font-size: 18px;
              font-family: SourceHanSansSC-Bold;
            }
            .e-item-box{
              width: 100%;
              height: calc(100% - 29px);
              display: flex;
              .e-item-left-box{
                width: 135px;
                height: 100%;
                position: relative;
              }
              .e-item-right-box{
                width: calc(100% - 135px);
                height: 100%;
              }
            }
          }
        }
      }
    }
    .ctn-box{
      width: 100%;
      height: 100%;

      .ctn-box-title{
        height: 44px;
        line-height: 44px;
        font-size: 24px;
        padding-left: 35px;
        font-family: SourceHanSansSC-Bold;

        span{
          text-shadow: 0 10px 42px rgba(4,7,29,0.5);
          background: linear-gradient(180deg, #FFFFFF 43.115234375%, #67CFFF 99.0478515625%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .ctn-box-base-box{
        height: calc(100% - 44px);
      }
    }
    // 右侧3d模型和底部车辆底盘数据
    .ctn-center{
      width: 821px;
      height: 100%;
      padding-left: 21px;

      .ctn-center-box{
        width: 100%;
        height: calc((100% - 21px)/2);
        background: url('@/assets/icons/ctn-center-box-bg.png') center/100% 100% no-repeat;
        &:first-child{
          margin-bottom: 21px;
        }

        .right-echarts-box{
          padding: 2px 11px;

          .tags{
            position: relative;
            padding: 0 8px;
            width: 100%;
            height: 98px;
            display: flex;
            .swiper{
              width: 100%;
              position: relative;
              z-index: 10;
              .tag-item{
                position: relative;
                display: inline-block;
                width: 88px;
                height: 100%;
                padding-top: 5px;
                font-size: 12px;
                font-family: SourceHanSansCN-Medium;
                font-weight: 500;
                text-align: center;
                text-shadow: 0 2px 14px rgba(0,0,0,0.5);
                cursor: pointer;

                img{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                }
                span{
                  white-space: nowrap;
                }
              }
              .swiper-wrapper{
                z-index: 100;
              }
            }

            [class|='swiper-button']{
              position: absolute;
              top: 0;
              width: 16px;
              height: 100%;
              background: url("@/assets/icons/arrow-btn-bg.png") center/100% 30px no-repeat;
              cursor: pointer;
              margin-top: 0;
              z-index: 9999;
              pointer-events: auto;
              &:after{
                content: none;
              }

              &.swiper-button-prev{
                left: 0;
                transform: rotateY(180deg);
              }
              &.swiper-button-next{
                right: 0;
              }
            }
          }
          .echarts-box{
            width: 100%;
            height: calc(100% - 98px);
          }
        }
      }
    }
  }

  .font-color-1{
    color: #12FBE8;
  }
  .font-color-2{
    color: #92E1FF;
  }
  .font-color-3{
    color: #FFB200;
  }
  .font-color-4{
    color: #FF9270;
  }
}